<template>
  <div class="admin-page">
    <!-- 头部区域：标题和操作栏 -->
    <div class="header-section">
      <h1 class="page-title">管理员管理</h1>
      <div class="action-bar">
        <!-- 搜索框：按用户名或ID搜索 -->
        <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索用户名或ID..."
            class="search-input"
            @input="handleSearch"
        />
        <!-- 状态筛选下拉框 -->
        <select v-model="activeStatus" class="status-select" @change="handleFilter">
          <option value="all">所有状态</option>
          <option value="1">正常</option>
          <option value="0">已禁用</option>
        </select>
        <!-- 新增管理员按钮（仅超级管理员可见） -->
        <button v-if="currentUserRole === '超级管理员'" class="add-btn" @click="showAddAdminModal">
          <i class="fas fa-plus"></i> 新增管理员
        </button>
      </div>
    </div>

    <!-- 表格区域：展示管理员数据 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
        <tr>
          <th style="width: 50px" >ID</th>
          <th>用户名</th>
          <th>角色</th>
          <th>状态</th>
          <th>创建时间</th>
          <th>更新时间</th>
          <th style="width: 200px"  v-if="currentUserRole === '超级管理员'">操作</th>
        </tr>
        </thead>
        <tbody v-if="paginatedAdmins.length > 0">
        <!-- 遍历显示管理员数据 -->
        <tr v-for="admin in paginatedAdmins" :key="admin.adminId">
          <td>{{ admin.adminId }}</td>
          <td>{{ admin.username }}</td>
          <td>{{ getRoleName(admin.role) }}</td>
          <td>
              <span class="status-badge" :class="statusClass(admin.status)">
                {{ getStatusName(admin.status) }}
              </span>
          </td>
          <td>{{ formatDate(admin.createdAt) }}</td>
          <td>{{ formatDate(admin.updatedAt) }}</td>
          <!-- 操作按钮（仅超级管理员可见） -->
          <td style="width: 200px" v-if="currentUserRole === '超级管理员'">
            <button class="action-btn btn-edit" @click="showEditModal(admin)">
              编辑
            </button>

            <button
                class="action-btn btn-danger"
                @click="confirmAction('delete', admin)"
            >
              删除
            </button>
            <button class="action-btn btn-info" @click="confirmAction('reset_password', admin)">
              重置密码
            </button>
          </td>
        </tr>
        </tbody>
        <!-- 空状态提示 -->
        <tbody v-else>
        <tr>
          <td :colspan="currentUserRole === '超级管理员' ? 7 : 6" class="empty-state">
            <i class="fas fa-user-slash empty-icon"></i>
            <p>暂无相关管理员</p>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页组件 -->
    <Pagination
        :current-page="currentPage"
        :total-pages="totalPages"
        @page-changed="handlePageChange"
    />

    <!-- 新增/编辑管理员模态框 -->
    <AppModal v-if="currentUserRole === '超级管理员'" :visible="formModalVisible" :title="formModalTitle" @update:visible="formModalVisible = $event" @confirm="saveAdmin">
      <!-- 用户名输入 -->
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="currentAdmin.username" placeholder="请输入用户名" />
      </div>
      <!-- 密码输入（仅新增时显示） -->
      <div class="form-group" v-if="formModalTitle === '新增管理员'">
        <label for="password">密码</label>
        <div class="password-input-container">
          <input
              :type="showPassword ? 'text' : 'password'"
              id="password"
              v-model="currentAdmin.password"
              placeholder="请输入密码"
              @input="validatePassword"
          />
          <!-- 密码可见性切换按钮 -->
          <button
              type="button"
              class="password-toggle"
              @click="togglePasswordVisibility"
              :class="{ 'password-visible': showPassword }"
          >
            <i class="icon">{{ showPassword ? '👁️' : '👁️‍🗨️' }}</i>
          </button>
        </div>
        <!-- 密码错误提示 -->
        <div v-if="passwordError" class="error-message">
          {{ passwordError }}
        </div>
        <!-- 密码要求提示 -->
        <div class="password-requirements">
          <p>密码要求：</p>
          <ul>
            <li :class="{ 'requirement-met': hasMinLength }">长度8-20字符</li>
            <li :class="{ 'requirement-met': hasUpperCase }">至少1个大写字母</li>
            <li :class="{ 'requirement-met': hasLowerCase }">至少1个小写字母</li>
            <li :class="{ 'requirement-met': hasNumber }">至少1个数字</li>
          </ul>
        </div>
      </div>
      <!-- 角色选择 -->
      <div class="form-group">
        <label for="role">角色</label>
        <select id="role" v-model="currentAdmin.role">
          <option value="2">超级管理员</option>
          <option value="1">内容管理员</option>
          <option value="0">普通管理员</option>
        </select>
      </div>
      <!-- 状态选择 -->
      <div class="form-group">
        <label for="status">状态</label>
        <select id="status" v-model="currentAdmin.status">
          <option value="1">正常</option>
          <option value="0">已禁用</option>
        </select>
      </div>
    </AppModal>

    <!-- 确认操作模态框（删除/重置密码） -->
    <AppModal
        v-if="currentUserRole === '超级管理员'"
        :visible="confirmModalVisible"
        :title="actionTitle"
        @update:visible="confirmModalVisible = $event"
        @confirm="executeAction"
    >
      <div class="modal-content-confirm">
        <p>您确定要{{ actionText }}吗？此操作不可逆。</p>
      </div>
    </AppModal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import Pagination from '../components/Pagination.vue';
import AppModal from '../components/AppModal.vue';
import axios from "../utils/axios.ts";

// 管理员数据
const adminsData = ref([]);

// 当前登录管理员的角色
const currentUserRole = ref('超级管理员');

// 状态管理
const formModalVisible = ref(false); // 表单模态框显示状态
const confirmModalVisible = ref(false); // 确认模态框显示状态
const formModalTitle = ref(''); // 表单模态框标题
const currentAdmin = ref({}); // 当前操作的管理员对象
const searchQuery = ref(''); // 搜索关键词
const activeStatus = ref('all'); // 当前筛选状态
const currentPage = ref(1); // 当前页码
const pageSize = 10; // 每页显示数量
const actionType = ref(''); // 操作类型（delete/reset_password）
const actionTitle = ref(''); // 操作标题
const actionText = ref(''); // 操作描述文本
const adminToAction = ref(null); // 待操作的管理员对象
const isLoading = ref(false); // 加载状态
const totalCount = ref(0); // 数据总数
const showPassword = ref(false); // 密码可见性状态
const passwordError = ref(''); // 密码错误信息
const hasMinLength = ref(false); // 密码长度是否符合要求
const hasUpperCase = ref(false); // 是否包含大写字母
const hasLowerCase = ref(false); // 是否包含小写字母
const hasNumber = ref(false); // 是否包含数字

// 工具函数：获取状态名称
const getStatusName = (status) => (status == 1 ? '正常' : '已禁用');
// 工具函数：获取状态CSS类名
const statusClass = (status) => `status-${status == 1 ? 'active' : 'inactive'}`;
// 工具函数：获取角色名称
const getRoleName = (role) => {
  switch(role) {
    case 2: return '超级管理员';
    case 1: return '内容管理员';
    case 0: return '普通管理员';
    default: return '未知角色';
  }
};
// 工具函数：格式化日期
const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
};

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 密码验证函数
const validatePassword = () => {
  const password = currentAdmin.value.password || '';

  // 检查长度
  hasMinLength.value = password.length >= 8 && password.length <= 20;

  // 检查大写字母
  hasUpperCase.value = /[A-Z]/.test(password);

  // 检查小写字母
  hasLowerCase.value = /[a-z]/.test(password);

  // 检查数字
  hasNumber.value = /\d/.test(password);

  // 检查是否包含文字（中文字符）
  const hasChinese = /[\u4e00-\u9fa5]/.test(password);

  // 设置错误信息
  if (hasChinese) {
    passwordError.value = '密码不能包含中文';
  } else if (!hasMinLength.value) {
    passwordError.value = '密码长度需为8-20个字符';
  } else if (!hasUpperCase.value || !hasLowerCase.value || !hasNumber.value) {
    passwordError.value = '密码需包含至少1个大写字母、1个小写字母和1个数字';
  } else {
    passwordError.value = '';
  }
};

// 判断搜索关键词是否为数字（ID）
const isNumericSearch = (query) => {
  return /^\d+$/.test(query);
};

// 获取管理员数据
const fetchAdmins = async () => {
  try {
    isLoading.value = true;
    let url = `/api/admins/page?page=${currentPage.value}&limit=${pageSize}`;
    let response;

    // 如果有搜索关键词，根据内容选择查询方式
    if (searchQuery.value.trim()) {
      const query = searchQuery.value.trim();

      if (isNumericSearch(query)) {
        // 如果是纯数字，先尝试按ID精确查询
        try {
          const idResponse = await axios.get(`/api/admins/selById?adminId=${query}`);
          if (idResponse && idResponse.code === 200 && idResponse.data) {
            // 如果找到对应的ID，直接使用该结果
            adminsData.value = [idResponse.data];
            totalCount.value = 1;
          } else {
            // 如果没有找到精确ID，回退到用户名模糊查询
            const nameResponse = await axios.get(`/api/admins/selByName?username=${encodeURIComponent(query)}`);
            if (nameResponse && nameResponse.code === 200) {
              adminsData.value = nameResponse.data || [];
              totalCount.value = adminsData.value.length;
            } else {
              adminsData.value = [];
              totalCount.value = 0;
            }
          }
        } catch (error) {
          console.error('ID查询失败，尝试用户名查询:', error);
          // ID查询失败时尝试用户名查询
          const nameResponse = await axios.get(`/api/admins/selByName?username=${encodeURIComponent(query)}`);
          if (nameResponse && nameResponse.code === 200) {
            adminsData.value = nameResponse.data || [];
            totalCount.value = adminsData.value.length;
          } else {
            adminsData.value = [];
            totalCount.value = 0;
          }
        }
      } else {
        // 非数字，使用用户名模糊查询
        response = await axios.get(`/api/admins/selByName?username=${encodeURIComponent(query)}`);
        if (response && response.code === 200) {
          adminsData.value = response.data || [];
          totalCount.value = adminsData.value.length;
        } else {
          console.error('搜索管理员数据失败:', response?.msg);
          adminsData.value = [];
          totalCount.value = 0;
        }
      }
    } else {
      // 正常分页查询
      response = await axios.get(url);
      if (response && response.code === 200) {
        adminsData.value = response.data.records;
        totalCount.value = response.data.total;
      } else {
        console.error('获取管理员数据失败:', response?.msg);
        adminsData.value = [];
        totalCount.value = 0;
      }
    }
  } catch (error) {
    console.error('获取管理员数据时出错:', error);
    adminsData.value = [];
    totalCount.value = 0;
  } finally {
    isLoading.value = false;
  }
};

// 筛选逻辑（在前端进行状态筛选）
const filteredAdmins = computed(() => {
  let filtered = adminsData.value;
  if (activeStatus.value !== 'all') {
    filtered = filtered.filter((admin) => admin.status.toString() === activeStatus.value);
  }
  return filtered;
});

// 分页逻辑
const totalPages = computed(() =>
    Math.ceil(totalCount.value / pageSize)
);
const paginatedAdmins = computed(() => {
  return filteredAdmins.value;
});

// 事件处理：页码改变
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchAdmins();
};

// 搜索处理 - 使用防抖优化性能
let searchTimeout = null;
const handleSearch = () => {
  clearTimeout(searchTimeout);
  searchTimeout = setTimeout(() => {
    currentPage.value = 1;
    fetchAdmins();
  }, 500); // 500ms防抖
};

// 筛选处理
const handleFilter = () => {
  currentPage.value = 1;
  // 状态筛选在前端进行，不需要重新请求数据
};

// 模态框操作：显示新增管理员模态框
const showAddAdminModal = () => {
  formModalTitle.value = '新增管理员';
  currentAdmin.value = {
    username: '',
    password: '', // 取消默认密码
    role: 0,
    status: 1,
  };
  showPassword.value = false; // 重置密码可见性
  passwordError.value = ''; // 重置密码错误信息
  // 重置密码验证状态
  hasMinLength.value = false;
  hasUpperCase.value = false;
  hasLowerCase.value = false;
  hasNumber.value = false;
  formModalVisible.value = true;
};

// 模态框操作：显示编辑管理员模态框
const showEditModal = (admin) => {
  formModalTitle.value = '编辑管理员';
  currentAdmin.value = { ...admin };
  formModalVisible.value = true;
};

// 保存管理员
const saveAdmin = async () => {
  // 如果是新增管理员，验证密码
  if (formModalTitle.value === '新增管理员') {
    if (!currentAdmin.value.password || currentAdmin.value.password.trim() === '') {
      alert('请输入密码');
      return;
    }

    // 验证密码是否符合要求
    validatePassword();
    if (passwordError.value) {
      alert(passwordError.value);
      return;
    }
  }

  try {
    let response;
    if (formModalTitle.value === '新增管理员') {
      response = await axios.post('/api/admins/add', currentAdmin.value);
    } else {
      response = await axios.post('/api/admins/revise', currentAdmin.value);
    }

    if (response && response.code === 200) {
      // 保存成功后重新获取数据
      await fetchAdmins();
      formModalVisible.value = false;
      alert('操作成功');
    } else {
      console.error('保存管理员失败:', response?.msg);
      alert(`操作失败: ${response?.msg || '未知错误'}`);
    }
  } catch (error) {
    console.error('保存管理员时出错:', error);
    alert('操作失败，请稍后重试');
  }
};

// 确认操作（删除/重置密码）
const confirmAction = (type, admin) => {
  actionType.value = type;
  adminToAction.value = admin;
  if (type === 'delete') {
    actionTitle.value = '删除管理员';
    actionText.value = `删除管理员 ${admin.username}`;
  } else if (type === 'reset_password') {
    actionTitle.value = '重置密码';
    actionText.value = `重置管理员 ${admin.username} 的密码为123456`;
  }
  confirmModalVisible.value = true;
};

// 执行操作（删除/重置密码）
const executeAction = async () => {
  if (!adminToAction.value) return;

  try {
    if (actionType.value === 'delete') {
      // 使用正确的API调用方式删除管理员
      const response = await axios.delete(`/api/admins/del?adminId=${adminToAction.value.adminId}`);

      if (response && response.code === 200) {
        // 删除成功后重新获取数据
        await fetchAdmins();
        alert('删除成功');
      } else {
        console.error('删除管理员失败:', response?.msg);
        alert(`删除失败: ${response?.msg || '未知错误'}`);
      }
    } else if (actionType.value === 'reset_password') {
      // 重置密码逻辑 - 调用修改接口，只更新密码字段
      const resetData = {
        adminId: adminToAction.value.adminId,
        password: '123456' // 重置为默认密码
      };

      const resetResponse = await axios.post('/api/admins/revise', resetData);

      if (resetResponse && resetResponse.code === 200) {
        alert(`管理员 ${adminToAction.value.username} 的密码已重置为123456`);
      } else {
        alert(`重置密码失败: ${resetResponse?.msg || '未知错误'}`);
      }
    }
  } catch (error) {
    console.error('执行操作时出错:', error);
    alert('操作失败，请稍后重试');
  } finally {
    confirmModalVisible.value = false;
    adminToAction.value = null;
  }
};

// 初始化加载数据
onMounted(() => {
  fetchAdmins();
});
</script>

<style scoped>
/* 页面布局 */
.admin-page {
  padding: 30px;
  background-color: #f5f7fa;
  min-height: 100%;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.action-bar {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.search-input,
.status-select {
  padding: 10px 15px;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s;
  background-color: white;
}

.search-input:focus,
.status-select:focus {
  outline: none;
  border-color: #4e54c8;
  box-shadow: 0 0 0 3px rgba(78, 84, 200, 0.1);
}

.add-btn {
  background-color: #4e54c8;
  color: white;
  padding: 10px 15px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-btn:hover {
  background-color: #3b429f;
}

.table-container {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.data-table th,
.data-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
}

.data-table td {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-badge {
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.status-active {
  background-color: #27ae60;
}
.status-inactive {
  background-color: #e74c3c;
}

.action-btn {
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 8px;
  font-weight: 500;
  white-space: nowrap;
}

.btn-edit {
  background-color: #3498db;
  color: white;
}
.btn-danger {
  background-color: #e74c3c;
  color: white;
}
.btn-info {
  background-color: #9b59b6;
  color: white;
}

.action-btn:hover {
  opacity: 0.9;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

/* 密码输入框容器 */
.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-container input {
  padding-right: 3rem;
}

.password-toggle {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.password-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.password-visible {
  color: #4e54c8;
}

/* 错误信息样式 */
.error-message {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
}

/* 密码要求样式 */
.password-requirements {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  font-size: 12px;
}

.password-requirements p {
  margin: 0 0 5px 0;
  font-weight: bold;
}

.password-requirements ul {
  margin: 0;
  padding-left: 20px;
}

.password-requirements li {
  color: #999;
}

.password-requirements li.requirement-met {
  color: #27ae60;
  text-decoration: line-through;
}

/* 模态框内的表单样式 */
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-group input,
.form-group select {
  width: 95%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>